<template>
	<div class="cu_table">
		<el-table
			ref="tableRef"
			:data="tableData.data"
			v-loading="tableLoading"
			style="font-size: 12px"
			:cell-style="{ fontWeight: '400', fontSize: '14px', color: 'rgba(0,0,0,0.65)', height: '46px' }"
			:header-cell-style="{
				height: '46px',
				background: '#F7F8FA',
				fontFamily: 'Alip-Regular',
				fontWeight: '400',
				fontSize: '14px',
				color: ' rgba(0,0,0,0.85)',
			}"
			@selection-change="selectionChange"
			@sort-change="sortChange"
			size="small"
		>
			<slot></slot>
		</el-table>
		<el-pagination
			background
			style="margin-top: 24px"
			layout="slot, ->,sizes,prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="defaultCurrentPage"
			v-model:page-size="tableData.size"
			:total="tableData.total"
			@current-change="currentChange"
			@size-change="sizeChange"
		>
			<div style="font-size: 14px; color: rgba(0, 0, 0, 0.6)">共 {{ tableData.total }} 项数据</div>
		</el-pagination>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
	// 列表内容
	tableData: {
		type: Object,
		default: () => {},
	},
	tableLoading: {
		type: Boolean,
		default: false,
	},
	defaultCurrentPage: {
		type: Number,
		default: 1,
	},
});

const emit = defineEmits(['currentChange', 'selectionChange', 'sizeChange', 'sortChange']);

const tableRef = ref();

function currentChange(page: number) {
	emit('currentChange', page);
}

function selectionChange(rows: any) {
	emit('selectionChange', rows);
}

function sizeChange(size: any) {
	emit('sizeChange', size);
}

function sortChange(sort: any) {
	emit('sortChange', sort);
}

function clearSelection() {
	tableRef.value.clearSelection();
}

function toggleRowSelection(row, isCheck) {
	tableRef.value.toggleRowSelection(row, isCheck);
}

defineExpose({
	clearSelection,
	toggleRowSelection,
});
</script>

<style scoped lang="scss">
.cu_table {
	// border-radius: 10px;
	// margin: 10px;
	&::after {
		content: '';
		clear: both;
		visibility: hidden;
		display: block;
		height: 0;
		overflow: hidden;
	}
}

.el-table {
	// border-radius: 10px;
	// border: 1px solid #f0f2f5;
}

:deep(.el-button--large) {
	padding: 0;
}

:deep(.el-pagination.is-background .btn-prev:disabled) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .btn-next:disabled) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .btn-prev) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .btn-next) {
	background-color: transparent;
}

:deep(.el-pagination.is-background .el-pager li) {
	background-color: transparent;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
}
</style>
